<template>
  <div>
    <div class="model" @click="close"></div>
    <div class="pay_box font_14" v-if="payStep === 0">
      <div class="clearfix box_title b_245">
        <span class="fl font_b">订单详情</span>
        <span class="fr iconfont close" @click="close()">&#xe616;</span>
      </div>
      <div class="clesrfix center h36 b_245">
        <div class="fl w60">课程信息</div>
        <div class="fl w40">价格</div>
      </div>
      <div class="clesrfix c_333 mgt10 h100 border_b">
        <div class="fl w60">
          <div class="img"><img :src="info.courseImg" alt=""></div>
          <div class="name">{{info.courseName}}</div>
        </div>
        <div class="fl w40 c_red center">{{money}}</div>
        <!-- <div class="fl w40 c_red center" v-if="info.discountType == 1">
          ￥{{isVip ? (info.fabPrice * info.discountPrice).toFixed(2) : (info.orgPrice * info.discountPrice).toFixed(2)}}
        </div>
        <div class="fl w40 c_red center" v-if="info.discountType == 2">
          ￥{{isVip ? (info.fabPrice - info.discountPrice).toFixed(2) : (info.orgPrice - info.discountPrice).toFixed(2)}}
        </div> -->
      </div>
      <div class="pd20 border_b">
        <span>备注:</span>
        <input class="remark" v-model="order.remark" type="text">
      </div>
      <div class="pay_type">
        <input type="radio" id="payType2" name="payType" value="2" v-model="order.payType">
        <label for="payType2" class="pay pay_ali"></label>
        <input type="radio" id="payType1" name="payType" value="1" v-model="order.payType">
        <label for="payType1" class="pay pay_weixin"></label>
      </div>
      <div class="modal_foot">
        <button class="solid_btn" @click="submit" :disabled="btntext === '正在提交...'">{{btntext}}</button>
      </div>
    </div>
    <div class="paymodal codemodal" v-else-if="payStep === 1">
      <div class="modal_head">
        <span class="fl">收银台</span>
        <a href="javascript:" @click="close()" class="close iconfont">&#xe616;</a>
      </div>
      <div class="modal_body">
        <div class="tip" v-if="orderInfo.payType === 2">支付宝支付 {{orderInfo.price.toFixed(2)}}元</div>
        <div class="tip" v-else>微信支付 {{orderInfo.price.toFixed(2)}}元</div>
        <div class="code" id="qrcode">
          <canvas id="canvas"></canvas>
        </div>
        <p class="tip2" v-if="orderInfo.payType === 2">请使用支付宝扫描<br> 二维码以完成订单</p>
        <p class="tip2" v-else>请使用微信扫描<br> 二维码以完成订单</p>
        <div class="tip_panel">
          提示: <br>
          支付成功前请勿手动关闭页面 <br>
          二维码两小时内有效,请及时扫码支付
        </div>
      </div>
    </div>
    <div class="paymodal payrun" v-else-if="payStep === 2">
      <div class="modal_head">
        <span class="fl">收银台</span>
        <a href="javascript:" @click="close()" class="close iconfont">&#xe616;</a>
      </div>
      <div class="modal_body">
        <div class="icon iconfont c_green">&#xe69f;</div>
        <div class="tip">支付成功</div>
        <div class="center">
          <router-link class="solid_btn" v-if="info.courseCategory == 1" :to="{name: 'courselDetail', params: {id: info.id}}">立即学习</router-link>
          <router-link class="solid_btn" v-else-if="info.courseCategory == 2" :to="{name: 'liveDetail', params: {id: info.id}}">立即学习</router-link>
          <router-link class="solid_btn" v-else-if="info.courseCategory == 3" :to="{name: 'liveAndBunch', params: {id: info.id}}">立即学习</router-link>
          <button class="solid_btn" v-else @click="reload">确定</button>
        </div>
      </div>
    </div>
    <div class="paymodal payrun" v-else-if="payStep === 3">
      <div class="modal_head">
        <span class="fl">收银台</span>
        <a href="javascript:" @click="close()" class="close iconfont">&#xe616;</a>
      </div>
      <div class="modal_body">
        <div class="icon iconfont c_red">&#xe68c;</div>
        <div class="tip">支付失败</div>
        <div class="center">
          <button class="solid_btn" @click="{payStep = 0}">重新购买</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {avtivityPay} from '~/api/activity.js'
  import {orderInfo} from '~/api/course.js'
  import QRCode from 'qrcode'
  import {mapState, mapMutations} from 'vuex'
  export default {
    props: {
      info: {
        type: [Object, Array],
        default: null
      }
    },
    data () {
      return {
        money: '',
        isVip: false,
        order: {
          payType: 1,
          channelType: 1,
          remark: '',
          userNo: ''
        },
        checkPay: false,
        btntext: '下一步',
        payStep: 0,
        orderInfo: null
      }
    },
    computed: {
      ...mapState(['userInfo', 'tokenInfo', 'clientData', 'webInfo'])
    },
    methods: {
      ...mapMutations(['RECORD_TEMPORARYURL', 'SIGN_OUT', 'RECORD_USERINFO']),
      reload () {
        window.location.reload();
      },
      close (event) {
        this.checkPay = true;
        this.$emit('hidefun', event);
      },
      qrcode (url) {
        QRCode.toCanvas(document.getElementById('canvas'), url, {
          width: 180,
          height: 180
        }, function (error) {
          if (error) console.error(error)
          console.log('success!')
        })
      },
      submit () {
        let that = this;
        that.btntext = '正在提交...';
        that.order.actId = that.info.actId
        that.order.courseNo = that.info.courseNo
        that.order.userNo = that.userInfo.userNo
        that.order.courseCategory = that.info.courseCategory
        avtivityPay(that.order).then(res => {
          that.btntext = '下一步';
          if (res.code === 200) {
            that.payStep = 1;
            that.orderInfo = res.data;
            this.ocl = setTimeout(function () {
              that.qrcode(res.data.payMessage);
            }, 100);
            that.getOrderInfo(res.data.orderNo)
          } else {
            if (res.code >= 300 && res.code < 400) {
              this.$msgBox({
                content: res.msg,
                isShowCancelBtn: false
              }).then(() => {
                this.RECORD_TEMPORARYURL()
                this.SIGN_OUT();
                this.$router.push({name: 'login'})
              }).catch(() => {})
            } else {
              this.$msgBox({
                content: res.msg,
                isShowCancelBtn: false
              }).then(() => {
                if (res.msg == '已经购买过本课程，无需重复购买') {
                  this.close()
                }
              }).catch(() => {})
            }
          }
        }).catch(() => {
          this.$msgBox({
            content: '提交失败,请重试',
            isShowCancelBtn: false
          })
          that.btntext = '重新提交';
        })
      },
      getOrderInfo (no) {
        let that = this;
        if (this.checkPay) {
          return false;
        }
        orderInfo({orderNo: no}).then(res => {
          if (res.data.orderStatus === 1) {
            setTimeout(function () {
              that.getOrderInfo(no);
            }, 1000);
          } else if (res.data.orderStatus === 2) {
            that.payStep = 2;
          } else {
            that.payStep = 3;
          }
        })
      }
    },
    mounted () {
      if (this.webInfo) {
        if (this.webInfo.isEnableVip && this.userInfo.isVip) {
          if (this.userInfo.expireTime) {
            if ((new Date(this.userInfo.expireTime)).getTime() > (new Date().getTime())) {
              this.isVip = true
            }
          }
        }
      }
      if (this.info.discountType === 1) {
        this.money = this.isVip ? (this.info.fabPrice * this.info.discountPrice).toFixed(2) : (this.info.orgPrice * this.info.discountPrice).toFixed(2)
      } else if (this.info.discountType === 2) {
        this.money = this.isVip ? (this.info.fabPrice - this.info.discountPrice).toFixed(2) : (this.info.orgPrice - this.info.discountPrice).toFixed(2)
      }
      if (this.money <= 0) {
        this.$msgBox({
          content: '活动异常，请联系客服',
          isShowCancelBtn: false
        }).then(() => {
          this.close()
        }).catch(() => {
          this.close()
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
a:hover {
  text-decoration: none;
}
.model {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.pay_box {
  overflow: hidden;
  width: 470px;
  border-radius: 6px;
  background: #fff;
  // padding: 20px;
  position: fixed;
  z-index: 2;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  .img{
    display: inline-block;
    width: 120px;
    padding: 0;
  }
  .name{
    width: 110px;
    float: right;
    vertical-align: top;
  }
  .box_title {
    height: 36px;
    line-height: 36px;
    padding: 0 20px;
    border-bottom: 1px solid rgb(230, 230, 230);
    color: #333;
  }
  .remark {
    width: 90%;
    font-size: 14px;
    height: 20px;
    position: relative;
    top: -2px;
    border: none;
    float: right;
  }
  .h36 {
    height: 36px;
    line-height: 36px;
  }
  .h100 {
    height: 100px;
  }
  .w60 {
    width: 242px;
    padding: 0 20px;
  }
  .w40 {
    width: 148px;
    padding: 0 20px;
  }
  .pd20 {
    padding: 20px;
  }
  .b_245 {
    background: rgb(245, 245, 245);
  }
}
.close {
  cursor: pointer;
  &:hover {
    color: #d51423;
  }
}
.modal_foot{
  border-top: 1px solid rgb(245, 245, 245);
  padding: 20px;
  text-align: center;
}
.pay_type{
  padding: 20px;
  overflow: hidden;
  input{
    display: none;
    &:checked + .pay{
      border-color: #ec7f00;
    }
  }
}
.pay{
  width: 210px;
  height: 50px;
  border: 1px solid #fff;
  float: left;
  background-repeat: no-repeat;
  background-position: center center;
  &.pay_ali {
    background-image: url();
  }
  &.pay_weixin {
    background-image: url();
  }
}
.payrun{
  .modal_body{
    padding: 30px;
    height: 180px;
  }
  .icon{
    font-size: 80px;
    width: 80px;
    margin: 0 auto;
    text-align: center;
  }
  .tip{
    font-size: 16px;
    text-align: center;
    padding-bottom: 20px;
  }
  .c_green{
    color: #05d005;
  }
}
.codemodal{
  .tip{
    margin: 30px auto 0;
    text-align: center;
    font-size: 16px;
  }
  .code{
    width: 180px;
    height: 180px;
    border: 1px solid #ddd;
    margin: 20px auto;
  }
  .tip2{
    margin: 0 auto;
    width: 130px;
    padding: 13px 0 13px 70px;
    height: 42px;
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    background: url() no-repeat 20px center #445f85;
  }
  .tip_panel{
    margin-top: 20px;
    padding: 20px;
    line-height: 20px;
    border-top: 1px solid #f1f1f1;
  }
}
.paymodal{
  position: fixed;
  left: 50%;
  top: 10%;
  z-index: 999;
  width: 480px;
  margin-left: -240px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  .modal_head{
    line-height: 46px;
    background-color: #f9f9f9;
    text-align: right;
    padding: 0 20px;
    .close{
      font-size: 14px;
    }
  }
  .modal_foot{
    border-top: 1px solid #e7e7eb;
    padding: 20px;
    text-align: center;
  }
  .table{
    width: 100%;
  }
  th{
    line-height: 36px;
    background-color: #f8f8f8;
  }
  td{
    vertical-align: middle;
    padding: 20px;
  }
  .name{
    width: 140px;
    padding-left: 12px;
    font-size: 16px;
  }
  .img{
    display: inline-block;
    width: 120px;
    padding: 0;
  }
  .name{
    display: inline-block;
    vertical-align: top;
  }
  .tabs {
    height: 48px;
    .tab{
      float: left;
      line-height: 46px;
      text-align: center;
      font-size: 16px;
      width: 50%;
    }
    span{
      cursor: default;
      display: inline-block;
      line-height: 46px;
    }
    .on{
      color: #ee7e00;
      span{
        border-bottom: 2px solid #ee7e00;
      }
    }
  }
}
</style>
